<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账户管理</title>
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap-table1.15.3.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/bootstrap-min-4.3.1.js"></script>
<script src="../js/pintuer.js"></script>
<script src="../js/initMain.js"></script>
<script type="text/javascript">
    function initTable(){
        $("#tableInfo").bootstrapTable({
            method:"post",
            contentType:"application/json",
            url:"/SysUsers/queryAllUser.action",
            //设置交替行样式
            striped:true,
            //初始显示页数
            pageNum:1,
            //是否显示分页
            pagination:true,
            //设置是服务端分页还是客户端分页
            sidePagination:"server",
            //页大小
            pageSize:5,
            //分页列表
            pageList: [5,6,10],
            //上传到服务器的参数
            queryParams:function (data) {
                return{
                    //计算页号，当前号
                    pageNum:(data.offset/data.limit)+1,
                    //计算页大小
                    pageSize: data.limit,
                }
            },
            columns:[

                {title:"编号",field:"id",align:"center"},
                {title:"账号",field:"loginId",align:"center"},
                {title:"状态",field:"status",align:"center",formatter:function (value,row,index) {
                        if(value==1||value=="1"){
                            return "启用";
                        }else if(value==0||value=="0"){
                            return "禁用";
                        }
                    }},
                {title: "授予/收回账户角色",field: "" ,align: "center",formatter:function (value,row,index) {

                        return "<a onclick='grantAndRevokeUserFromRole("+JSON.stringify(row)+")' href='#'>授予/收回账号角色</a>";

                    }}
            ],onLoadSuccess:function(){
                $.ajax({
                    url:"/SysUsers/queryAllUser1.action",
                    type:"post",
                    success:function (data) {
                        var allTableData = $("#tableInfo tbody tr");
                        for(var i = 0; i < allTableData.length; i++) {
                            for(var j=0;j<data.length;j++){
                                var menu=data[j];
                                if(menu.id == $("#tableInfo tbody tr").eq(i).children().eq(2).text() ) {
                                    // alert(menu.id);
                                    // alert($("#tableInfo tbody tr").eq(j).children().eq(2).text() );
                                    $("#tableInfo tbody tr").eq(i).children().eq(2).text( menu.name );
                                }

                            }
                            if( $("#tableInfo tbody tr").eq(i).children().eq(2).text()<0){
                                $("#tableInfo tbody tr").eq(i).children().eq(2).text("-");
                            }
                        }
                    }
                })

                // alert(allTableData.length);


            }

        })
    }
    function initImg(){
        $('#btn_addUser').click(function () {
            //
            // var frm = $('#frm').serialize();
            // frm = decodeURIComponent(frm,true);
            let form = new FormData();
            let file = document.getElementById("file").files[0];
            let loginId = $('input[name="loginId"]').val();
            let password = $('input[name="password"]').val();
            let rePassword = $('#rePassword').val();
            if (password===rePassword){
            form.append("loginId",loginId);
            form.append("password",password);
            form.append("photoPath",file);
            $.ajax({
                type:'post',
                url:'/SysUsers/addUserACount',
                data:form,
                contentType: false, //必须false才会自动加上正确的Content-Type
                processData: false,
                success:function (data) {
                    if (data>0){
                        alert('上传成功')
                        $('#addUser').modal('hide');
                        initTable();
                    }else{
                        alert('上传失败')
                        $('#addUser').modal('hide');
                    }

                    // window.location='/index.html'
                },
                error:function () {
                    alert('上传失败')
                    $('#addUser').modal('hide');
                }
            })
            }else{
                alert("你的账户密码验证错误，请重新输入！");
                $('#password').val("");
                $('#rePassword').val("");
            }
        });
    }

    function check(){
        var loginId = $('input[name="loginId"]').val();
        $.ajax({
            url:'/SysUsers/checkAddUserACount.action',
            type:'get',
            data:'loginId='+loginId,
            success:function (data) {
                if (data==0){
                    alert("已有此账号，请重新输入。");
                    $('input[name="loginId"]').val("");
                    $('input[name="password"]').val("");
                    $('#rePassword').val("");
                }else{
                    initImg();
                }
            }
        })
    }
    $(function () {
        initTable();
        $("#saveGrantAndRevokeUserFromRole").click(function () {
            var roleIds=[];
            var roleIdsNoCheck=[];
            for(var i=0;i<$("#queryUserTable tbody tr").length;i++){
                var roleId=$("#queryUserTable tbody tr").eq(i).children().eq(0).children().eq(0).attr("id");
                if($("#queryUserTable tbody tr").eq(i).children().eq(0).children().eq(0).is(":checked")){
                    // alert(1);
                    roleIds.push(roleId);
                }else{
                    roleIdsNoCheck.push(roleId);
                }
            }
            $.ajax({
                url:"/sysUserRoles/grantAndRevokeUserFromRole.action",
                type:"post",
                data: "roleIdsStr="+JSON.stringify(roleIds)+"&userId="+userId+"&roleIdsNoCheck="+JSON.stringify(roleIdsNoCheck),
                success:function (data) {
                    $("#queryRoleModel").modal("hide");
                }
            })
        })

        $(document).on("click","#bigCheck",function(){
            if($(this).is(":checked")){
                $(".menuCheck").prop("checked",true);
            }else{
                $(".menuCheck").prop("checked",false);
            }
        })
        $(document).on("click",".menuCheck",function () {
            var len=$(".menuCheck:checked").length;
            //alert(len);
            if(len==0){
                $("#bigCheck").prop("checked",false);
            }
        })
    })

    function mo() {
        $("#addUser").modal("show");
    }
    function grantAndRevokeUserFromRole(User) {
        userId=User.id;
        $("input:checkbox").prop("checked",false);
        $("#queryRoleModel").modal("show");
        $("#queryUserTable").bootstrapTable("destroy");
        $("#queryUserTable").bootstrapTable({
            method:"post",
            contentType:"application/json",
            url:"/sysRoles/queryAllRoles",
            //设置交替行样式
            striped:true,
            //初始显示页数
            pageNum:1,
            //是否显示分页
            pagination:true,
            //设置是服务端分页还是客户端分页
            sidePagination:"server",
            //页大小
            pageSize:5,
            //分页列表
            pageList: [5,6,10],
            //上传到服务器的参数
            queryParams:function (data) {
                return{
                    //计算页号，当前号
                    pageNum:(data.offset/data.limit)+1,
                    //计算页大小
                    pageSize: data.limit,
                }
            },
            columns:[

                {title:"<input type='checkbox' id='bigCheck'>",field:"id",align:"center",formatter:function (value,row,index) {
                        return "<input type='checkbox' class='menuCheck' id='"+value+"'/>"
                    }},
                {title:"角色ID",field:"id",align:"center"},
                {title:"角色名",field:"name",align:"center"},
                {title:"角色编号",field:"code",align:"center"},
                {title:"描述",field:"descn",align:"center"}
            ],onLoadSuccess:function(){
                $.ajax({
                    url:"/sysRoles/queryAllRole1.action",
                    type:"post",
                    success:function (data) {
                        var allTableData = $("#queryUserTable tbody tr");
                        for(var i = 0; i < allTableData.length; i++) {
                            for(var j=0;j<data.length;j++){
                                var role=data[j];
                                if(role.id == $("#queryUserTable tbody tr").eq(i).children().eq(3).text() ) {
                                    // alert(menu.id);
                                    // alert($("#tableInfo tbody tr").eq(j).children().eq(2).text() );
                                    $("#queryUserTable tbody tr").eq(i).children().eq(3).text( role.name );
                                }

                            }
                            if( $("#queryUserTable tbody tr").eq(i).children().eq(3).text()<0){
                                $("#queryUserTable tbody tr").eq(i).children().eq(3).text("-");
                            }
                        }
                        //默认选中
                        $.ajax({
                            url:"/sysRoles/queryRoleByUserId.action",
                            type:"post",
                            data:"userId="+User.id,
                            success:function (data) {
                                var len=$("#queryUserTable tbody tr").length;
                                for(var i=0;i<len;i++){
                                    for(var j=0;j<data.length;j++){
                                        var menu=data[j];
                                        if($("#queryUserTable tbody tr").eq(i).children().eq(1).text()==menu.id){
                                            $("#queryUserTable tbody tr").eq(i).children().eq(0).children().eq(0).attr("checked","true");
                                        }
                                    }
                                }
                            }
                        })
                    }
                })

            }

        })
    }

    function btnR() {
        $('#addUser').modal("hide");
    }

    $(function () {
        $('#btn_return').click(function () {
            btnR();
        });
    })
</script>
<div class="row">
    <div class="col-10"></div>
    <div class="col-2"><button class="btn-primary btn" onclick="mo();">添加新用户</button></div>
</div>
<table id="tableInfo"></table>
<div class="modal  fade" id="queryRoleModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 90%">
        <div class="modal-content" style="border: 1px solid black;">
            <div class="modal-header">
                <div class="container">
                    <div class="row">
                        <div class="col-7" style="text-align: right">
                            <h5 class="modal-title" id="info" >
                                授予收回账户角色
                            </h5>
                        </div>
                        <div class="col-2"></div>
                        <div class="col-3" style="position: absolute;right: 30px">
                            <button class="btn btn-primary" id="saveGrantAndRevokeUserFromRole">确定</button>
                        </div>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px">

                </button>
            </div>
            <div class="modal-body">
                <table id="queryUserTable">

                </table>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal  fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 30%">
        <div class="modal-content" style="border: 1px solid black;">
            <div class="modal-header">
                <div class="container">
                    <div class="row">
                        <div class="col-9" style="text-align: right">
                            <h5 class="modal-title"  >
                                添加新账户
                            </h5>
                        </div>
                        <div class="col-3"></div>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px">

                </button>
            </div>
            <div class="modal-body">
                <form id="frm">
                    <span>请上传您的头像:</span><br>
                    <input type="file" id="file" name="photoPath"><br>
                    <span>账号：</span>
                    <input type="text" class="input" name="loginId" onblur="check();"/><br>
                    <span>密码：</span>
                    <input type="password" class="input" id="password" name="password"/><br>
                    <span>请再次输入密码：</span>
                    <input type="password" class="input" id="rePassword"/><br>
                    <div class="row">
                        <div class="col-1">

                        </div>
                        <div class="col-5">
                            <input type="button" style="width: 100px;" id="btn_addUser" class="btn btn-primary btn-group" value="添加">
                        </div>
                        <div class="col-6">
                            <input type="button" style="width: 100px;" id="btn_return" class="btn btn-primary btn-group" value="返回">
                        </div>
                    </div>

                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>